<template>
    <div class="flats_list">
        <p class="title p-2" v-if="showTitle">青年公寓1206</p>
        <div class="d-flex flex-wrap pb-3">
            <div class="flats_item p-3" v-for="(item, index) of list" :key="index" @click.stop="toHouseResource(item)">
                <div class="d-flex justify-content-between subtitle pt-1 pb-1">
                    <span>房间1</span>
                    <el-button size="mini" class="delete" icon="el-icon-delete" circle></el-button>
                </div>
                <div class="d-flex justify-content-between pt-1 pb-1 detail">
                    <span>15m<sup>2</sup></span>
                    <span>单间</span>
                </div>
                <div class="pt-1 pb-1 status" :class="{empty:index%2}">{{index%2==0 ? '已租': '空置'}}</div>
                <div class="pt-1 pb-1 money">租金 1500元/月</div>
                <el-button size="small" plain @click.stop="toTenant(item)">导入租户信息</el-button>
                <el-button type="primary" size="small" @click.stop="toIntelligentDevice(item)">关联智能硬件</el-button>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'FlatsItem',
    props: {
        showTitle: {
            type: Boolean,
            default: true
        }
    },
    data(){
        return {
            list: Array.from({length: 13}).fill(1)
        }
    },
    methods: {
        toIntelligentDevice(item){
            this.$emit('toIntelligentDevice', {
                item
            });
        },
        toTenant(item){
            this.$emit('toTenant', {
                item
            });
        },
        toHouseResource(item){
            this.$emit('toHouseResource', {
                item
            });
        }
    }
}
</script>

<style lang="scss" scoped>
    .title{
        border-radius: 4px;
        border-left: 4px solid #2874ed;
        background-color: #f8f8f8;
    }
    .subtitle{
        border-bottom: 1px solid #fff;
        font-size:18px;
        color:#3d3d3d;
        .delete{
            color: #ccc;
            background-color: #ecf5ff;
            border: none;
            font-size: 16px;
            &:hover{
                color:#2874ed;
            }
        }
    }
    .detail{
        > span{
            font-size:12px;
            color:#999999;
        }
    }
    .status{
        font-size:16px;
        color:#2874ed;
        &.empty{
            color:#d0021b;
        }
    }
    .money{
        font-size:14px;
        color:#4a4a4a;
    }
    .flats_item{
        background:#ecf5ff;
        box-shadow:5px 5px 8px 0 rgba(40,116,237,0.16);
        border-radius:4px;
        width:200px;
        height: 250px;
        margin-right: 30px;
        margin-bottom: 30px;
        &:hover{cursor: pointer;}
        .el-button:not(.delete){
            display: block;
            margin: 0 auto;
            width: 100%;
            margin-top: 10px;
        }
    }
</style>

